<template>
	<view class="tabbar">
		<view class="tabbar-box">
			<view class="tabbar-item" @click="toIndex(item, index)" v-for="(item, index) in dataProvider" :key="index">
				<view class="tabbar-label-wrapper">
					<!-- <text>{{item.name}}</text> -->
					<!-- <image ref="img" class="icon" :src="item.icon" mode="scaleToFill"></image> -->
					<lottie :options="item.options" :width="40" :height="40" v-on:animCreated="handleAnimation($event, index)" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as animationData_shouye from '@/static/images/shouye.json';
import * as animationData_fabu from '@/static/images/fabu.json';
import * as animationData_bisai from '@/static/images/bisai.json';
import * as animationData_xiaoxi from '@/static/images/xiaoxi.json';
import * as animationData_wode from '@/static/images/wode.json';

import Lottie from 'vue-lottie';

export default {
	props: {
		dataProvider: {
			type: Array,
			default() {
				return [
					{
						name: '首页',
						path: '/pages/shouye/shouye',
						icon: require('@/static/images/shouye.png'),
						options: {
							animationData: animationData_shouye.default,
							loop: false,
							autoplay: false,
							speed: 0.1
						}
					},
					{
						name: '发布',
						path: '/pages/fabu/fabu',
						icon: require('@/static/images/fabu.png'),
						options: {
							animationData: animationData_fabu.default,
							loop: false,
							autoplay: false
						}
					},
					{
						name: '比赛',
						path: '/pages/bisai/bisai',
						icon: require('@/static/images/bisai.png'),
						options: {
							animationData: animationData_bisai.default,
							loop: false,
							autoplay: false
						}
					},
					{
						name: '消息',
						path: '/pages/xiaoxi/xiaoxi',
						icon: require('@/static/images/xiaoxi.png'),
						options: {
							animationData: animationData_xiaoxi.default,
							loop: false,
							autoplay: false
						}
					},
					{
						name: '我的',
						path: '/pages/wode/wode',
						icon: require('@/static/images/wode.png'),
						options: {
							animationData: animationData_wode.default,
							loop: false,
							autoplay: false
						}
					}
				];
			}
		}
	},
	data() {
		return {
			defaultAnim: {}
		};
	},
	components: { Lottie },
	mounted() {
		this.animPlay();
	},
	activated() {
		this.animPlay();
	},
	methods: {
		toIndex(item, index) {
			// console.log(item.path);
			getApp().globalData.tabIndex = index;
			uni.switchTab({
				url: item.path
			});
		},
		handleAnimation(event, index) {
			console.log(event); //这里可以看到 lottie 对象的全部属性
			event.setSpeed(2);
			this.defaultAnim[`anim${index}`] = event;
		},
		animPlay() {
			const tabIndex = getApp().globalData.tabIndex;
			console.log(this.defaultAnim);
			const currentAnim = this.defaultAnim[`anim${tabIndex}`];
			// console.log(tabIndex)
			currentAnim.stop();
			currentAnim.play();
		}
	}
};
</script>

<style scoped>
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	background: #ffffff;
	border-top: 1px solid #c2c2c2;
}

.tabbar-box {
	display: flex;
	width: 100%;
	height: 100%;
}
.tabbar-item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	height: 100%;
}
.tabbar-label-wrapper {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.icon {
	width: 56upx;
	height: 56upx;
}
</style>
